<template>
  <div class="pannel02">
    <div id="pie_show" class="pie_show"></div>
  </div>
</template>

<script>
import cons from '@/components/constant'
export default {
  name: 'PieGraph',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  // mounted(){
  //   let token = localStorage.token;
  //   let oPie = this.echarts.init(document.getElementById('pie_show'));
  //   let pro01 = new Promise((resolve,reject)=>{
  //       this.axios.get(cons.apis + '/statistical/day_active/', {
  //             headers: {
  //               'Authorization': 'JWT ' + token
  //             },
  //             responseType: 'json',
  //         })
  //         .then(dat=>{
  //             console.log("xxxxx:", dat)
  //             resolve(dat);
  //         }).catch(err=>{
  //            reject(dat);
  //       });
  //   });

  //   let pro02 = new Promise((resolve,reject)=>{
  //       this.axios.get(cons.apis + '/statistical/day_orders/', {
  //             headers: {
  //               'Authorization': 'JWT ' + token
  //             },
  //             responseType: 'json',
  //         })
  //         .then(dat=>{
  //             resolve(dat);
  //         }).catch(err=>{
  //            reject(dat);
  //       });
  //   });

  //   async function fnFinish(){
  //     let rs01 = await pro01;
  //     let rs02 = await pro02;
  //     //console.log([rs01,rs02]);

  //     var oPieopt =  
  //       {
  //         title : {
  //             top:10,
  //             text: '日活及下单用户比',
  //             x:'center'
  //         },
  //         tooltip : {
  //             trigger: 'item',
  //             formatter: "{a} <br/>{b} : {c} ({d}%)"
  //         },
  //         color:['#ffcb5b','#ff6666'],
  //         legend: {
  //             x : 'center',
  //             top:65,
  //             data:['日活用户','下单用户']
  //         },
  //         toolbox: {
  //             show : true,
  //             x : 'center',
  //             top:35,
  //             feature : {
  //                 mark : {show: true},
  //                 dataView : {show: true, readOnly: false},
  //                 magicType : {
  //                     show: true, 
  //                     type: ['pie', 'funnel'],
  //                     option: {
  //                         funnel: {
  //                             x: '25%',
  //                             width: '50%',
  //                             funnelAlign: 'left',
  //                             max: 1548
  //                         }
  //                     }
  //                 },
  //                 restore : {show: true},
  //                 saveAsImage : {show: true}
  //             }
  //         },
  //         calculable : true,
  //         series : [
  //             {
  //                 name:'访问来源',
  //                 type:'pie',
  //                 radius : '55%',
  //                 center: ['50%', '60%'],
  //                 data:[
  //                     {value:rs01.data.count, name:'日活用户'},
  //                     {value:rs02.data.count, name:'下单用户'},                   
  //                 ]
  //             }
  //         ]
  //     };

  //     oPie.setOption(oPieopt);
  //   }

  //   fnFinish();    
  // }
}
</script>

<style scoped>
.pannel02{
  width:27.8%;
  height:350px;
  margin:20px auto 0;
  background-color:#fff;
  float:left;
  margin-left:2.4%;
}
.pie_show{
  width:100%;
  height:350px;
}
</style>
